<template>
  <d2-container :class="{ 'page-compact': crud.pageOptions.compact }">
    <d2-crud-x
      ref="d2Crud"
      v-bind="_crudProps"
      v-on="_crudListeners"
      crud.options.tableType="vxe-table"
    >
      <div slot="header">
        <crud-search
          ref="search"
          :options="crud.searchOptions"
          @submit="handleSearch"
        />
        <el-button-group>
          <el-button
            size="small"
            v-permission="'Create'"
            type="primary"
            @click="addRow"
            ><i class="el-icon-plus" /> 新增</el-button
          >
        </el-button-group>
        <crud-toolbar
          :search.sync="crud.searchOptions.show"
          :compact.sync="crud.pageOptions.compact"
          :columns="crud.columns"
          @refresh="doRefresh()"
          @columns-filter-changed="handleColumnsFilterChanged"
        />
      </div>
      <template slot="features_menuFormSlot" slot-scope="scope">
        <el-tree
          class="flow-tree"
          ref="menuTree"
          :data="allMenu"
          show-checkbox
          check-strictly
          node-key="id"
          highlight-current
          :expand-on-click-node="false"
          :check-on-click-node="false"
          empty-text="暂无菜单，请先进行功能菜单初始化"
          :props="defaultProps"
          @check-change="handleCheckClick(scope.form)">
        </el-tree>
      </template>
      <template slot="features_menuSlot" slot-scope="scope">
        <el-popover
          placement="right"
          width="400"
          trigger="hover">
          <el-tree
            class="flow-tree"
            :data="allDisabledMenu"
            disabled
            show-checkbox
            node-key="id"
            highlight-current
            check-strictly
            :default-checked-keys="scope.row['features_menu']"
            :expand-on-click-node="false"
            :check-on-click-node="false"
            empty-text="暂无菜单，请先进行功能菜单初始化"
            :props="defaultProps">
          </el-tree>
          <el-button type="primary" plain size="mini" slot="reference">已授权 <span> {{scope.row['features_menu'].length}} 个菜单</span></el-button>
        </el-popover>
      </template>
    </d2-crud-x>
  </d2-container>
</template>

<script>
import * as api from './api'
import { crudOptions } from './crud'
import { d2CrudPlus } from 'd2-crud-plus'
import XEUtils from 'xe-utils'

export default {
  name: 'PackageFeatures',

  mixins: [d2CrudPlus.crud],
  data () {
    return {
      allMenu: [],
      allDisabledMenu: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created () {
    this.getMenuList()
  },
  methods: {
    // 对话框打开后调用，赋值
    doDialogOpened (context) {
      this.$nextTick().then(() => {
        this.$refs.menuTree.setCheckedKeys(context.form.features_menu)
      })
    },
    getCrudOptions () {
      return crudOptions(this)
    },
    pageRequest (query) {
      return api.GetList(query)
    },
    addRequest (row) {
      return api.createObj(row)
    },
    updateRequest (row) {
      return api.UpdateObj(row)
    },
    delRequest (row) {
      return api.DelObj(row.id)
    },
    getMenuList () {
      api.GetMenuList().then((ret) => {
        this.allMenu = XEUtils.toArrayTree(ret.data.data || ret.data, { parentKey: 'parent', strict: false })
        const data = ret.data.data || ret.data
        this.allDisabledMenu = XEUtils.toArrayTree(JSON.parse(JSON.stringify(data)).map(val => { val.disabled = true; return val }), { parentKey: 'parent', strict: false })
      })
    },
    handleCheckClick (row) {
      row.features_menu = this.$refs.menuTree.getCheckedNodes(false, true).map(val => { return val.id })
    }
  }
}
</script>

<style lang="scss">
.yxtInput {
  .el-form-item__label {
    color: #49a1ff;
  }
}
</style>
